<template>
	<div class="admin-container">
		<!-- 搜索栏 -->
		<div class="search-bar">
			<el-row :gutter="20">
				<el-col :span="6">
					<el-input v-model="searchParams.orderId" placeholder="请输入订单编号" clearable
						@keyup.enter.native="searchByOrderId">
					</el-input>
				</el-col>
				<el-col :span="4">
					<el-date-picker v-model="searchParams.date" type="date" placeholder="选择预约日期" value-format="yyyy-MM-dd"
						@change="searchByDate">
					</el-date-picker>
				</el-col>
				<el-col :span="3">
					<el-select v-model="searchParams.status" placeholder="请选择状态" clearable @change="searchByStatus">
						<el-option label="全部" value="全部"></el-option>
						<el-option label="未支付" value="未支付"></el-option>
						<el-option label="未签到" value="未签到"></el-option>
						<el-option label="已签到" value="已签到"></el-option>
						<el-option label="退款中" value="退款中"></el-option>
						<el-option label="已退款" value="已退款"></el-option>
						<el-option label="已过期" value="已过期"></el-option>
					</el-select>
				</el-col>
				<el-col :span="15">
					<el-button type="primary" @click="searchByOrderId">搜索订单编号</el-button>
					<el-button type="success" @click="showAddDialog">新增</el-button>
				</el-col>
			</el-row>
		</div>
		<div class="operation-bar">
			<el-button size="mini" @click="batchMarkPaid">已付款</el-button>
			<el-button size="mini" @click="batchMarkShipped">已签到</el-button>
			<el-button size="mini" @click="refund">同意退款</el-button>
			<el-button size="mini" @click="refund2">已过期</el-button>
			<el-button size="mini" @click="batchDelete">删除</el-button>
		</div>
		<!-- 信息展示区 -->
		<div class="table-container">
			<el-table :data="tableData" style="width: 100%" border v-if="tableData.length > 0"
				@selection-change="handleSelectionChange">
				<el-table-column type="selection" width="55">
				</el-table-column>
				<el-table-column prop="ordernumber" label="订单编号" width="180">
				</el-table-column>
				<el-table-column prop="username" label="用户名">
				</el-table-column>
				<el-table-column prop="phone" label="电话号码">
				</el-table-column>
				<el-table-column prop="email" label="用户邮箱">
				</el-table-column>
				<el-table-column prop="name" label="服务名称">
				</el-table-column>
				<el-table-column prop="status" label="状态">
				</el-table-column>
				<el-table-column prop="appointment_time" label="预约时间">
					<template slot-scope="scope">
						{{ formatDate(scope.row.appointment_time) }}
					</template>
				</el-table-column>
				<el-table-column prop="total_amount" label="实付">
				</el-table-column>
				<el-table-column prop="discount" label="折扣">
					<template slot-scope="scope">
						{{ scope.row.discount }}%
					</template>
				</el-table-column>
				<el-table-column prop="message" label="用户留言">
				</el-table-column>
				<el-table-column prop="create_time" label="创建时间">
					<template slot-scope="scope">
						{{ formatDate(scope.row.create_time) }}
					</template>
				</el-table-column>
				<el-table-column prop="update_time" label="修改时间">
					<template slot-scope="scope">
						{{ formatDate(scope.row.update_time) }}
					</template>
				</el-table-column>
				<el-table-column label="操作" width="150">
					<template slot-scope="scope">
						<el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
						<el-button size="mini" type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div v-else class="no-data">
				<p>没有找到匹配的数据</p>
			</div>
		</div>
		<!-- 分页组件 -->
		<div class="pagination-container">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:current-page.sync="currentPage" :page-size.sync="pageSize"
				layout="total, sizes, prev, pager, next, jumper" :total="allData.length">
			</el-pagination>
		</div>
		<!-- 新增对话框 -->
		<el-dialog title="新增预约订单" :visible.sync="addDialogVisible" width="30%">
			<el-form :model="addOrder" :rules="addRules" ref="addForm">
				<el-form-item label="用户名" prop="username">
					<el-input v-model="addOrder.username"></el-input>
				</el-form-item>
				<el-form-item label="电话" prop="phone">
					<el-input v-model="addOrder.phone"></el-input>
				</el-form-item>
				<el-form-item label="邮箱" prop="email">
					<el-input v-model="addOrder.email"></el-input>
				</el-form-item>
				<el-form-item label="折扣" prop="discount">
					<el-input v-model="addOrder.discount"></el-input>
				</el-form-item>
				<el-form-item label="服务名称" prop="service_name">
				        <el-select v-model="addOrder.service_id" @change="handleServiceChange" placeholder="请选择服务名称">
				          <el-option v-for="service in services" :key="service.id" :label="service.name" :value="service.id">
				          </el-option>
				        </el-select>
				      </el-form-item>
				      <el-form-item label="预约时间段" prop="appointmentslot_id">
				        <el-select v-model="addOrder.appointmentslot_id"  @change="calculateTotalAmount" placeholder="请选择时间段">
				          <el-option v-for="slot in availableSlots" :key="slot.id"
				            :label="formatDate(slot.appointment_time) + ' - ' + formatDate(slot.deadline)" :value="slot.id"
				            :disabled="slot.state !== '可预约'">
				          </el-option>
				        </el-select>
				      </el-form-item>
				      <el-form-item label="总金额" prop="total_amount">
				        <el-input v-model="addOrder.total_amount" readonly></el-input>
				      </el-form-item>
				      <el-form-item label="用户留言" prop="message">
				        <el-input v-model="addOrder.message"></el-input>
				      </el-form-item>
				    </el-form>
				    <span slot="footer" class="dialog-footer">
				      <el-button @click="addDialogVisible = false">取消</el-button>
				      <el-button type="primary" @click="handleAdd">确定</el-button>
				    </span>
		</el-dialog>
		<!-- 编辑对话框 -->
		<el-dialog title="编辑预约订单" :visible.sync="editDialogVisible" width="30%">
			<el-form :model="currentRow" :rules="editRules" ref="editForm">
				<!-- <el-form-item label="ID" prop="id">
					<el-input v-model="currentRow.id"></el-input>
				</el-form-item> -->
				<!-- <el-form-item label="用户ID" prop="user_id">
					<el-input v-model="currentRow.user_id"></el-input>
				</el-form-item> -->
				<el-form-item label="订单编号" prop="ordernumber">
					<el-input v-model="currentRow.ordernumber" readonly></el-input>
				</el-form-item>
				<el-form-item label="用户ID" prop="username">
					<el-input v-model="currentRow.username" readonly></el-input>
				</el-form-item>
				<el-form-item label="邮箱" prop="email">
					<el-input v-model="currentRow.email" readonly></el-input>
				</el-form-item>
				<el-form-item label="电话" prop="phone">
					<el-input v-model="currentRow.phone"></el-input>
				</el-form-item>
				<el-form-item label="折扣" prop="discount">
					<el-input v-model="currentRow.discount"></el-input>
				</el-form-item>
				<el-form-item label="服务名称" prop="service_name">
				      <el-select v-model="currentRow.service_id" @change="handleServiceChange" placeholder="请选择服务名称" disabled>
				        <el-option v-for="service in services" :key="service.id" :label="service.name" :value="service.id">
				        </el-option>
				      </el-select>
				    </el-form-item>
				    <el-form-item label="预约时间段" prop="appointmentslot_id">
				      <el-select v-model="currentRow.appointmentslot_id" @change="calculateTotalAmount2" placeholder="请选择时间段">
				        <el-option v-for="slot in availableSlots" :key="slot.id"
				          :label="formatDate(slot.appointment_time) + ' - ' + formatDate(slot.deadline)" :value="slot.id"
				          :disabled="slot.state !== '可预约'">
				        </el-option>
				      </el-select>
				    </el-form-item>
				    <el-form-item label="总金额" prop="total_amount">
				      <el-input v-model="currentRow.total_amount" readonly></el-input>
				    </el-form-item>
				<!-- <el-form-item label="状态" prop="status">
					<el-input v-model="currentRow.status"></el-input>
				</el-form-item> -->
				<el-form-item label="状态" prop="status">
					<el-select v-model="currentRow.status" placeholder="请选择状态">
						<el-option label="未支付" value="未支付"></el-option>
						<el-option label="未签到" value="未签到"></el-option>
						<el-option label="已签到" value="已签到"></el-option>
						<el-option label="退款中" value="退款中"></el-option>
						<el-option label="已退款" value="已退款"></el-option>
						<el-option label="已过期" value="已过期"></el-option>
					</el-select>
				</el-form-item>
<!-- 				<el-form-item label="总金额" prop="total_amount">
					<el-input v-model="currentRow.total_amount"></el-input>
				</el-form-item> -->
				<el-form-item label="用户留言" prop="message">
					<el-input v-model="currentRow.message"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="editDialogVisible = false">取消</el-button>
				<el-button type="primary" @click="handleUpdate">更新</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import axios from 'axios';
	import {
		Input,
		Row,
		Col,
		Button,
		Select,
		Option,
		Table,
		TableColumn,
		Dialog,
		Form,
		FormItem,
		Pagination,
		Message
	} from 'element-ui';

	export default {
		name: 'AppointmentTable',
		components: {
			'el-input': Input,
			'el-row': Row,
			'el-col': Col,
			'el-button': Button,
			'el-select': Select,
			'el-option': Option,
			'el-table': Table,
			'el-table-column': TableColumn,
			'el-dialog': Dialog,
			'el-form': Form,
			'el-form-item': FormItem,
			'el-pagination': Pagination
		},
		data() {
			return {
				allData: [],
				tableData: [],
				searchParams: {
					orderId: '',
					status: '全部'
				},
				selectedRows: [],
				addDialogVisible: false,
				addOrder: {
					username: '',
					phone: '',
					email: '',
					total_amount: '',
					discount: '',
					service_id: null,
					appointmentslot_id: null,
					message: ''
				},
				editDialogVisible: false,
				currentRow: {
					id: '',
					user_id: '',
					username: '',
					ordernumber: '',
					phone: '',
					email: '',
					discount: '',
					service_id: null,
					appointmentslot_id: null,
					status: '',
					total_amount: '',
					message: ''
				},
				services: [],
				availableSlots: [],
				addRules: {
					username: [{
						required: true,
						message: '请输入用户名',
						trigger: 'blur'
					}],
					phone: [{
						required: true,
						message: '请输入电话',
						trigger: 'blur'
					}],
					email: [{
						required: true,
						message: '请输入邮箱',
						trigger: 'blur'
					}],
					total_amount: [{
						required: true,
						message: '请输入总金额',
						trigger: 'blur'
					}],
					discount: [{
						required: true,
						message: '请输入折扣',
						trigger: 'blur'
					}],
					service_id: [{
						required: true,
						message: '请选择服务名称',
						trigger: 'change'
					}],
					appointmentslot_id: [{
						required: true,
						message: '请选择预约时间段',
						trigger: 'change'
					}],
					message: [{
						required: false,
						message: '请输入消息',
						trigger: 'blur'
					}]
				},
				editRules: {
					id: [{
						required: true,
						message: '请输入ID',
						trigger: 'blur'
					}],
					user_id: [{
						required: true,
						message: '请输入用户ID',
						trigger: 'blur'
					}],
					phone: [{
						required: true,
						message: '请输入电话',
						trigger: 'blur'
					}],
					discount: [{
						required: true,
						message: '请输入折扣',
						trigger: 'blur'
					}],
					email: [{
						required: true,
						message: '请输入邮箱',
						trigger: 'blur'
					}],
					ordernumber: [{
						required: true,
						message: '请输入订单编号',
						trigger: 'blur'
					}],
					username: [{
						required: true,
						message: '请输入名称',
						trigger: 'blur'
					}],
					appointmentslot_id: [{
						required: true,
						message: '请输入预约时间段ID',
						trigger: 'blur'
					}],
					status: [{
						required: true,
						message: '请输入状态',
						trigger: 'blur'
					}],
					total_amount: [{
						required: true,
						message: '请输入总金额',
						trigger: 'blur'
					}],
					message: [{
						required: false,
						message: '请输入消息',
						trigger: 'blur'
					}]
				},
				currentPage: 1,
				pageSize: 10,
			};
		},
		created() {
			this.fetchData();
			this.fetchServices();
		},
		methods: {
			fetchData() {
				const token = localStorage.getItem('Authorization');
				if (!token) {
					this.$message.error('未授权访问');
					return;
				}
				const headers = {
					'Content-Type': 'application/json',
					'Authorization': token
				};
				if (this.searchParams.status === '全部') {
					axios.get('http://localhost:8887/Serviceappointment/findAll', {
							headers
						})
						.then(response => {
							if (response.data.code === 200) {
								this.allData = response.data.data;
								 this.sortTableByUpdateTime(); 
								this.tableData = this.allData.slice((this.currentPage - 1) * this.pageSize, this
									.currentPage * this.pageSize);
							} else {
								this.$message.error('获取数据失败: ' + response.data.message);
							}
						})
						.catch(error => {
							console.error('请求失败:', error);
							this.$message.error('请求失败，请检查网络或联系管理员');
						});
				} else {
					axios.get('http://localhost:8887/Serviceappointment/selectstatus', {
							headers,
							params: {
								status: this.searchParams.status
							}
						})
						.then(response => {
							if (response.data.code === 200) {
								this.allData = response.data.data;
								this.sortTableByUpdateTime(); 
								this.tableData = this.allData.slice((this.currentPage - 1) * this.pageSize, this
									.currentPage * this.pageSize);
							} else {
								this.$message.error('获取数据失败: ' + response.data.message);
							}
						})
						.catch(error => {
							console.error('请求失败:', error);
							this.$message.error('请求失败，请检查网络或联系管理员');
						});
				}
			},
			sortTableByUpdateTime() {
			  this.allData.sort((a, b) => {
			    return new Date(b.update_time) - new Date(a.update_time);
			  });
			},
			formatDate(value) {
				const date = new Date(value);
				return new Intl.DateTimeFormat('zh-CN', {
					year: 'numeric',
					month: '2-digit',
					day: '2-digit',
					hour: '2-digit',
					minute: '2-digit',
					second: '2-digit',
					hour12: false
				}).format(date);
			},
			batchRefund() {
				this.batchUpdateStatus('退款中');
			},
			batchMarkPaid() {
				this.batchUpdateStatus('未签到');
			},
			batchMarkShipped() {
				this.batchUpdateStatus('已签到');
			},
			refund() {
				this.batchUpdateStatus('已退款');
			},
			refund2() {
				this.batchUpdateStatus('已过期');
			},
			batchDelete() {
				this.confirmAndDelete();
			},
			batchUpdateStatus(newStatus) {
				this.$confirm('确认执行此批量操作吗?', '提示', {
					type: 'warning'
				}).then(() => {
					const ids = this.selectedRows.map(row => row.id);
					if (ids.length === 0) {
						this.$message.warning('请选择要操作的行');
						return;
					}
					const payload = {
						ids: ids,
						status: newStatus
					};
					const token = localStorage.getItem('Authorization');
					const headers = {
						'Content-Type': 'application/json',
						'Authorization': token
					};
					axios.post('http://localhost:8887/Serviceappointment/batchUpdateStatus', payload, {
							headers
						})
						.then(response => {
							if (response.data.code === 200) {
								this.$message.success(response.data.message);
								this.fetchData(); // 重新加载数据
							} else {
								this.$message.error(response.data.message);
							}
						})
						.catch(error => {
							console.error('请求失败:', error);
							this.$message.error('请求失败，请检查网络或联系管理员');
						});
				}).catch(() => {
					this.$message.info('已取消操作');
				});
			},
			confirmAndDelete() {
				this.$confirm('确认执行此批量操作吗?', '提示', {
					type: 'warning'
				}).then(() => {
					const ids = this.selectedRows.map(row => row.id);
					if (ids.length === 0) {
						this.$message.warning('请选择要操作的行');
						return;
					}
					const payload = {
						ids: ids,
					};
					const token = localStorage.getItem('Authorization');
					const headers = {
						'Content-Type': 'application/json',
						'Authorization': token
					};
					axios.post('http://localhost:8887/Serviceappointment/admindelete', payload, {
							headers
						})
						.then(response => {
							if (response.data.code === 200) {
								this.$message.success(response.data.message);
								this.fetchData(); // 重新加载数据
							} else {
								this.$message.error(response.data.message);
							}
						})
						.catch(error => {
							console.error('请求失败:', error);
							this.$message.error('请求失败，请检查网络或联系管理员');
						});
				}).catch(() => {
					this.$message.info('已取消操作');
				});
			},
			searchByOrderId() {
				const token = localStorage.getItem('Authorization');
				const headers = {
					'Content-Type': 'application/x-www-form-urlencoded',
					'Authorization': token,
				};
				axios.get('http://localhost:8887/Serviceappointment/selectordernumber', {
						headers,
						params: {
							ordernumber: this.searchParams.orderId
						}
					})
					.then(response => {
						if (response.data.code === 200) {
							this.allData = response.data.data;
							this.sortTableByUpdateTime(); 
							this.tableData = this.allData.slice((this.currentPage - 1) * this.pageSize, this
								.currentPage * this.pageSize);
						} else {
							this.fetchData();
							this.$message.error(response.data.message || '未找到匹配的订单编号');
							this.tableData = [];
						}
					})
					.catch(error => {
						this.fetchData();
						console.error('请求失败:', error);
						this.$message.error('未找到匹配的订单编号');
					});
			},
			searchByStatus() {
				this.fetchData();
			},
			searchByDate(value) {
				if (value) {
					this.fetchDataByDate(value);
				}
			},
			fetchDataByDate(date) {
				const token = localStorage.getItem('Authorization');
				const headers = {
					'Content-Type': 'application/json',
					'Authorization': token
				};
				axios.get('http://localhost:8887/Serviceappointment/selectOrder', {
						params: {
							date
						},
						headers
					})
					.then(response => {
						if (response.data.code === 200) {
							this.allData = response.data.data;
							this.sortTableByUpdateTime(); 
							this.tableData = this.allData.slice((this.currentPage - 1) * this.pageSize, this
								.currentPage * this.pageSize);
						} else {
							this.fetchData();
							this.$message.error('获取数据失败: ' + response.data.message);
						}
					})
					.catch(error => {
						this.fetchData();
						console.error('请求失败:', error);
						this.$message.error('请求失败，请检查网络或联系管理员');
					});
			},
			handleEdit(row) {
				this.currentRow = Object.assign({}, row);
				this.editDialogVisible = true;
				this.fetchAvailableSlots(this.currentRow.service_id);
			},
			handleDelete(id) {
				this.$confirm('确认删除这条记录吗?', '提示', {
					type: 'warning'
				}).then(() => {
					const token = localStorage.getItem('Authorization');
					const headers = {
						'Content-Type': 'application/x-www-form-urlencoded',
						'Authorization': token
					};
					axios.post('http://localhost:8887/Serviceappointment/delete', {
							id
						}, {
							headers
						})
						.then(response => {
							if (response.data.code === 200) {
								this.$message.success('删除成功');
								this.fetchData(); // 重新加载数据
							} else {
								this.$message.error('删除失败: ' + response.data.message);
							}
						})
						.catch(error => {
							console.error('请求失败:', error);
							this.$message.error('请求失败，请检查网络或联系管理员');
						});
				}).catch(() => {
					this.$message.info('已取消删除');
				});
			},
			handleAdd() {
				this.$refs.addForm.validate((valid) => {
					if (valid) {
						const token = localStorage.getItem('Authorization');
						const headers = {
							'Content-Type': 'application/json',
							'Authorization': token
						};
						axios.post('http://localhost:8887/Serviceappointment/adminadd', this.addOrder, {
								headers
							})
							.then(response => {
								if (response.data.code === 200) {
									this.$message.success(response.data.message);
									this.addDialogVisible = false;
									this.fetchData(); // 重新加载数据
								} else {
									this.$message.error(response.data.message);
								}
							})
							.catch(error => {
								console.error('请求失败:', error);
								this.$message.error('请求失败，请检查网络或联系管理员');
							});
					} else {
						return false;
					}
				});
			},
			handleUpdate() {
				this.$refs.editForm.validate((valid) => {
					if (valid) {
						const token = localStorage.getItem('Authorization');
						const headers = {
							'Content-Type': 'application/json',
							'Authorization': token
						};
						axios.post('http://localhost:8887/Serviceappointment/adminupdate', this.currentRow, {
								headers
							})
							.then(response => {
								if (response.data.code === 200) {
									this.$message.success(response.data.message);
									this.editDialogVisible = false;
									this.fetchData(); // 重新加载数据
								} else {
									this.$message.error(response.data.message);
								}
							})
							.catch(error => {
								console.error('请求失败:', error);
								this.$message.error('请求失败，请检查网络或联系管理员');
							});
					} else {
						return false;
					}
				});
			},
			showAddDialog() {
				this.addDialogVisible = true;
				this.addOrder = {
					username: '',
					phone: '',
					email: '',
					total_amount: '',
					discount: '100',
					service_id: null,
					appointmentslot_id: null,
					message: ''
				};
			},
			handleSizeChange(newSize) {
				this.pageSize = newSize;
				this.sortTableByUpdateTime(); 
				this.tableData = this.allData.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this
					.pageSize);
			},
			handleCurrentChange(newPage) {
				this.currentPage = newPage;
				this.sortTableByUpdateTime(); 
				this.tableData = this.allData.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this
					.pageSize);
			},
			handleSelectionChange(val) {
				this.selectedRows = val;
			},
			fetchServices() {
				const token = localStorage.getItem('Authorization');
				const headers = {
					'Content-Type': 'application/json',
					'Authorization': token
				};
				axios.get('http://localhost:8887/Service/findAll', {
						headers
					})
					.then(response => {
						if (response.data.code === 200) {
							this.services = response.data.data;
						} else {
							this.$message.error('获取服务数据失败: ' + response.data.message);
						}
					})
					.catch(error => {
						console.error('请求失败:', error);
						this.$message.error('请求失败，请检查网络或联系管理员');
					});
			},
			fetchAvailableSlots(service_id) {
			      const token = localStorage.getItem('Authorization');
			      const headers = {
			        'Content-Type': 'application/json',
			        'Authorization': token
			      };
			      axios.get(`http://localhost:8887/Appointmentslot/selectservice_id`, {
			        headers: headers,
			        params: {
			          service_id: service_id
			        }
			      })
			      .then(response => {
			        if (response.data.code === 200) {
			          this.availableSlots = response.data.data;
					  // 根据 appointment_time 对时间段进行排序，时间晚的在上面
					        this.availableSlots.sort((a, b) => new Date(b.appointment_time) - new Date(a.appointment_time));
			        } else {
			          this.$message.error('获取时间段数据失败: ' + response.data.message);
			        }
			      })
			      .catch(error => {
			        // console.error('请求失败:', error);
			        this.$message.error('请选择宠物服务！');
			      });
			    },
			    handleServiceChange(service_id) {
			      this.fetchAvailableSlots(service_id);
			    },
			    calculateTotalAmount(appointmentslot_id) {
			      if (this.addOrder.appointmentslot_id && this.availableSlots.length > 0) {
			        const selectedSlot = this.availableSlots.find(slot => slot.id === this.addOrder.appointmentslot_id);
			        const price = selectedSlot.discount_price || selectedSlot.original_price;
			        this.addOrder.total_amount = price * this.addOrder.discount/100;
			      }
			    },
				calculateTotalAmount2(appointmentslot_id) {
				  if (this.currentRow.appointmentslot_id && this.availableSlots.length > 0) {
				    const selectedSlot = this.availableSlots.find(slot => slot.id === this.currentRow.appointmentslot_id);
				    const price = selectedSlot.discount_price || selectedSlot.original_price;
				    this.currentRow.total_amount = price * this.currentRow.discount/100;
				  }
				}
			  }
			};
			</script>

<style scoped>
	.admin-container {
		padding: 20px;
		max-width: 100%;
		overflow-x: auto;
	}

	.search-bar {
		margin-bottom: 20px;
	}

	.search-bar .el-row {
		display: flex;
		justify-content: space-between;
	}

	.search-bar .el-button {
		margin-left: 10px;
	}

	.table-container {
		margin-top: 20px;
		overflow-x: auto;
	}

	.no-data {
		text-align: center;
		padding: 20px;
	}

	.pagination-container {
		margin-top: 20px;
		text-align: left;
	}

	.dialog-footer {
		text-align: right;
	}

	.el-dialog__body {
		padding: 20px;
	}

	.el-form-item {
		margin-bottom: 20px;
	}

	.el-form-item__label {
		font-weight: bold;
	}

	.el-button--primary {
		background-color: #13ce66;
		border-color: #13ce66;
	}

	.el-button--primary:hover {
		background-color: #11b55e;
		border-color: #11b55e;
	}
</style>